<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>物业费统计</title>
<jsp:include page="../../views/layout/inc.jsp"></jsp:include>

<script type="text/javascript">
	var dataGrid;
	$(function() {
		dataGrid = $('#dataGrid').datagrid({
			singleSelect : true,
			url : '/propertyFeeStatisticsController/dataGrid',
			fit : true,
			fitColumns : false,
			border : false,
			pagination : true,
			idField : 'id',
			pageSize : 10,
			pageList : [ 10, 20, 30, 40, 50 ],
			sortName : 'gmtModify',
			sortOrder : 'desc',
			checkOnSelect : false,
			selectOnCheck : false,
			nowrap : true,
			columns : [[ {
				field : 'buildingName',
				title : '楼栋',
				width : 110,
				sortable : true
			},{
				field : 'unitName',
				title : '单元',
				width : 110,
				sortable : true
			},{
				field : 'num',
				title : '门牌号',
				width : 110,
				sortable : true
			},{
				field : 'ownerName',
				title : '业主姓名',
				width : 110,
				sortable : true
			},{
				field : 'ownerMobile',
				title : '业主手机号',
				width : 140
			},{
				field : 'space',
				title : '面积（平方米）',
				width : 120,
				sortable : true
			},{
				field : 'amount',
				title : '已缴物业费（元）',
				width : 150,
				sortable : true,
				formatter:function(val,rec){ 
					return val/100;
				}
			},{
				field : 'gmtModify',
				title : '最后缴费时间',
				width : 150,
				sortable : true,
				formatter:function(val,rec){ 
					 var unixTimestamp = new Date(val);  
                    return unixTimestamp.format("yyyy-MM-dd hh:mm:ss");  
				}
			} ]],
			toolbar : '#toolbar',
			onLoadSuccess : function() {
				$('#searchForm table').show();
				parent.$.messager.progress('close');
				$(this).datagrid('tooltip');
			}
		});
		
		loadCombo();
		getAmountTotal();
	});

	function loadCombo() {
		$('#doorId').combobox({
			data : [],
			width : 120,
		    panelHeight:'auto',
		    icons : [{
				iconCls : 'icon-clear',
				handler : function(e){
					$(e.data.target).combobox('setValue','');
				}
			}]
		});
		
		$('#unitId').combobox({
			data : [],
			width : 120,
		    panelHeight:'auto',
		    icons : [{
				iconCls : 'icon-clear',
				handler : function(e){
					$(e.data.target).combobox('setValue','');
					$('#doorId').combobox('loadData', []);
					$('#doorId').combobox('setValue','');
				}
			}],
			onSelect : function(a) {
				$('#doorId').combobox('clear');
				$('#doorId').combobox('reload',
						'/houseDoorplatManager/combobox?buildingUnitId='
								+ a.value);
			}
		}); 
		
		$('#buildingId').combobox({
			url : '/propertyFeeStatisticsController/buildingCombobox',
			width : 120,
		    panelHeight:'auto',
		    icons : [{
				iconCls : 'icon-clear',
				handler : function(e){
					$(e.data.target).combobox('setValue','');
					$('#unitId').combobox('loadData', []);
					$('#unitId').combobox('setValue','');
					$('#doorId').combobox('loadData', []);
					$('#doorId').combobox('setValue','');
				}
			}],
			onSelect : function(a) {
				$('#unitId').combobox('clear');
				$('#unitId').combobox('reload','/buildingUnitManager/combobox?parentId='+ a.value);
				$('#doorId').combobox('loadData', []);
				$('#doorId').combobox('clear');
			} 
		});
	}
	
	function getAmountTotal() {
		var data = {};
		data.startGmtModify = $('#startGmtModify').val();
		data.endGmtModify = $('#endGmtModify').val();
		$.ajax({
			type:'post',
			url:'/propertyFeeStatisticsController/getAmountSum',
			data:data,
			success:function(result) {
				$('#amountTotal').html(result/100);
			},
			dataType:'text'
		});
	}

	function searchFun() {
		dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
		getAmountTotal();
	}
	function cleanFun() {
		$('#searchForm input').val('');
		dataGrid.datagrid('load', {});
		getAmountTotal();
	}
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit : true,border : false">
		<div data-options="region:'north',title:'查询条件',border:false" style="height: 220px; overflow: hidden;">
			<form id="searchForm">
				<table class="table table-hover table-condensed" style="display: none;">
					<tr>
						<th>楼栋</th>
						<td><input id="buildingId" name="buildingId" class="span2" /></td>
					</tr>
					<tr>
						<th>单元</th>
						<td><input id="unitId" name="unitId" class="span2" /></td>
					</tr>
					<tr>
						<th>门牌号</th>
						<td><input id="doorId" name="doorId" class="span2" /></td>
					</tr>
					<tr>
						<th>业主姓名</th>
						<td><input name="ownerName" placeholder="可以模糊查询" class="span2" /></td>
					</tr>
					<tr>
						<th>面积（平方米）</th>
						<td><input name="minSpace" class="easyui-numberbox span2" min="0" max="9999" precision="2" style="width:150px"/>
							至<input name="maxSpace" class="easyui-numberbox span2" min="0" max="9999" precision="2" style="width:150px"/></td>
					</tr>
					<tr>
						<th>已缴物业费（元）</th>
						<td><input name="minAmount" class="easyui-numberbox span2" min="0" max="99999999" precision="2" style="width:150px"/>
							至<input name="maxAmount" class="easyui-numberbox span2" min="0" max="99999999" precision="2" style="width:150px"/></td>
					</tr>
					<tr>
						<th>缴费时间</th>
						<td><input name="startGmtModify" id="startGmtModify" placeholder="点击选择时间" class="Wdate" style="width:150px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endGmtModify\') || \'%y-%M-%d\'}'})"/>
							至<input name="endGmtModify" id="endGmtModify" placeholder="点击选择时间" class="Wdate" style="width:150px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startGmtModify\') || \'%y-%M-%d\'}'})"/></td>
					</tr>
				</table>
			</form>
		</div>
		<div data-options="region:'center',border:false">
			<table id="dataGrid"></table>
		</div>
	</div>
	<div id="toolbar" style="display: none;">
		<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">提交查询</a>
		<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="cleanFun();">重置查询</a>
		<span style="float: right;height: 26px;text-align: center;line-height: 26px">小区已缴纳物业费共有<b id="amountTotal"></b>元</span>
	</div>
</body>
</html>